<template>
  <div class="home-banner" id="banner">
    <div class="banner-wrap">
      <div class="banner-item" v-for="item in Home.banner">
        <a :href="item.link ? item.link : 'javascript:;'">
          <img :src="item.src" :alt="item.alt ? item.alt : '米娱游戏'">
        </a>
      </div>
    </div>
    <!-- 轮播控制器  -->
    <div class="banner-controls">
      <a href="javascript:;" class="controls-menu controls-left">
        <i class="iconfont icon-zuo"></i>
      </a>
      <a href="javascript:;" class="controls-menu controls-right">
        <i class="iconfont icon-gengduo"></i>
      </a>
    </div>
    <!-- 二维码APP推广  -->
    <div class="app-spread">

    </div>
    <!-- 侧边快速导航  -->
    <ul class="right-menu-nav" :style="{'left': isRightMenu ? '50%' : '100%'}">
      <li v-for="item in rightMenu" :class="{'right-menu-nav-activate': item.activate}">
        <a href="javascript:;">{{item.text}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRightMenu: false, // 是否显示侧边栏
      rightMenu: [
        { text: '新游速递', activate: true },
        { text: '游戏资讯', activate: false },
        { text: '精彩活动', activate: false },
        { text: '热门游戏', activate: false },
        { text: '专题合集', activate: false },
        { text: '下载排行', activate: false },
        { text: '精美图集', activate: false }
      ]
    }
  },
  computed: {
    Home: function() {
      return this.$store.state.mock
    //   return this.$store.state.Home
    }
  },
  methods: {
    // 插入脚本函数
    appendJS(url, part, callback) {
      var element = document.createElement('script')
      element.setAttribute('type', 'text/javascript')
      element.setAttribute('src', url)
      if (part) {
        document[part].appendChild(element)
      }
      if (callback && typeof (callback) === 'function') {
        element.onload = element.onreadystatechange = callback
      }
      return element
    }
  },
  mounted() {
    // 加载自定义jQuery
    const that = this
    that.appendJS('/public/js/jquery.min.js', 'head', function() {
      // 加载图片轮播代码
      that.appendJS('/public/js/banner.js', 'head', function() {
        
        const bannerImage = new banner('banner', that.Home.banner.length)
      })
      // 滚动到指定位置显示对应的侧边导航状态
      $(window).on('scroll', () => {
        const top = $(window).scrollTop()
        top >= 550 ? that.isRightMenu = true : that.isRightMenu = false
        $('.scroll-item').each(function(i) {
          if ((top + 80) > $(this).offset().top && (top + 80) < $('.scroll-item').eq(i + 1).offset().top) {
            //console.log(i, $('.scroll-item').eq(i))
            that.rightMenu.map(v => v.activate = false)
            that.rightMenu[i].activate = true
          }
        })
      })
      // 点击侧边导航跳转到指定位置
      $('.right-menu-nav li').on('click', function() {
        const index = $(this).index()
        const top = $('.scroll-item').eq(index).offset().top
        $(window).scrollTop(top - 70)
      })
    })
  }
}
</script>

<style lang="less" scoped>
.home-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
  .banner-wrap {
    position: relative;
    height: 680px;
    .banner-item {
      position: absolute;
      overflow: hidden;
      a {
        display: block;
        background-color: #000;
        width: 100%;
        height: 100%;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .banner-controls {
    width: 62.5%;
    position: absolute;
    left: 50%;
    top: 300px;
    overflow: hidden;
    z-index: 9;
    transform: translateX(-50%);
    .controls-menu {
      background-color: black;
      opacity: 0.5;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2px solid #fff;
      position: relative;
      i {
        color: #fff;
        font-size: 28px;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .controls-left {
      float: left;
      margin-left: 20px;
      i {
        left: 60%;
      }
      opacity: 0
    }
    .controls-right {
      float: right;
      margin-right: 20px;
      i {
        left: 40%;
      }
      opacity: 0
    }
  }
}

.right-menu-nav {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 30%;
  margin-left: 635px;
  border: 1px solid #eee;
  width: 110px;
  background-color: #fff;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  li {
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    a {
      display: inline-block;
      line-height: 50px;
      color: #666;
      font-size: 14px;
      padding: 0 15px;
      position: relative;
      border-bottom: 1px solid #eee;
      &:hover {
        color: #ffa93a;
        text-decoration: underline;
      }
    }
    &:last-child {
      a {
        border-bottom: 0
      }
    }
  }
  .right-menu-nav-activate {
    background-color: #ffa93a;
    a {
      color: #fff;
      border-bottom: 1px solid #ffa93a;
      &:before {
        content: '';
        width: 0;
        height: 0;
        line-height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid #fff;
        background-color: transparent;
        position: absolute;
        left: 0;
        top: 20px;
      }
      &:after {
        content: '';
        width: 0;
        height: 0;
        line-height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #fff;
        background-color: transparent;
        position: absolute;
        right: 0;
        top: 20px;
      }
      &:hover {
        color: #fff;
        text-decoration: underline;
      }
    }
  }
}
</style>


